<template>
  <div style="margin-top: 4px">
    <svg width="16" height="16" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
      <!-- 背景圆环 -->
      <circle cx="512" cy="512" r="450" stroke="orange" stroke-width="100" fill="none" />

      <!-- 进度扇形 -->
      <path :d="progressPath" fill="orange" stroke="none" />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'roundSvg',
  data() {
    return {
    }
  },
  props: {
    percentage: {
      type: Number,
      default: 0
    }
  },
  computed: {
    progressPath() {
      const radius = 450;
      const centerX = 512;
      const centerY = 512;
      const startAngle = -90; // 起始角度（从12点钟方向开始，逆时针方向）
      const endAngle = (this.percentage / 100) * 360 - 90; // 结束角度

      // 将角度转换为弧度
      const startRadians = (startAngle * Math.PI) / 180;
      const endRadians = (endAngle * Math.PI) / 180;

      // 描述扇形路径的字符串
      const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
      const pathData = [
        `M ${centerX} ${centerY}`, // 移动到圆心
        `L ${centerX + radius * Math.cos(startRadians)} ${centerY + radius * Math.sin(startRadians)}`, // 画到起始点
        `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${centerX + radius * Math.cos(endRadians)} ${centerY + radius * Math.sin(endRadians)}`, // 绘制弧到结束点
        `Z` // 闭合路径
      ].join(' ');

      return pathData;
    }
  },
  watch: {
  }
};
</script>

<style scoped lang="less">

</style>
